<template>
  <div class="citylist">
    <div class="ListData" v-if="cityName.length > 0">
      <ul v-for="(item, index) in cityName" :key="index" class="ListData-ul" @click="SelectGoto(item)">
        <li class="ListData-name">
          {{ item.cityName }}
        </li>
        <li class="ListData-XZQH">
          行政区划:<span>{{ XZQHName }}</span>
          <van-button v-if="ISshow" @click="handlegoto(item)" style="float: right; color: #fff" type="primary" size="small"
            >检查任务</van-button
          >
        </li>
        <li class="ListData-FWNum">
          任务底数:{{item.totalNum}}条
          <span></span>
        </li>
        <li class="ListData-FWNum">
          完成数:{{item.ischeckNum}}条
          <span></span>
        </li>
        <!-- <li class="ListData-FWNum">
          完全符合数:{{item.allMatchNum}}条
          <span></span>
        </li> -->
      </ul>
    </div>
    <div v-else style="height: 99vh; text-align: center; padding-top: 20vh">
      <div style="margin-bottom: 10px">
        <img src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/DSF/50.png" />
      </div>
      <div>暂无数据</div>
    </div>
  </div>
</template>
<script>
import { houseCheckSupervisionFwCheckList1,houseCheckFwCheckList } from '../../../utils/api'
import dd from 'gdt-jsapi'
export default {
  data() {
    return {
      //省市区
      SXQ: '',
      ISshow:false,
      cityName: [],
      //区分当前点击的是市区县
      isCity: 0,
      XZQHName: '',
    }
  },
  methods: {
    //根据citycode区分市区县镇街道
    discriminateCity(str) {
      debugger
      if (str.endsWith('0000000000')) {
        //省
        this.isCity = 0
      } else if (str.endsWith('00000000')) {
        //市
        this.isCity = 1
      } else if (str.endsWith('000000')) {
        //区
        debugger
        this.isCity = 2
      } else if (str.endsWith('000')) {
        //街道
        this.isCity = 3
        this.ISshow = false
      } else {
        //村
        this.isCity = -1
        this.ISshow = false
      }
    },
    handlegoto(data) {
      this.$router.push({
        path: '/SinceBuilding',
        query: {
          data: data.cityCode,
        },
      })
    },
    SelectGoto: async function (data) {
      let parmes = {
        cityCode: data.cityCode,
        houseUse: 6,
        masterName: '',
        pageNo: 0,
        pageSize: 0,
        roleType: window.sessionStorage.getItem('citycodeRole'),
      }
      if (data.cityCode.length < 12 ||(data.cityCode.length  == 12 && data.cityCode.endsWith('000'))) {
        if (
          window.sessionStorage.getItem('citycodeRole') == '0' &&
          window.sessionStorage.getItem('SelectCity') == '1'
        ) {
          parmes.roleType = 1
        } else if (
          window.sessionStorage.getItem('citycodeRole') == '0' &&
          window.sessionStorage.getItem('SelectCity') == '2'
        ) {
          parmes.roleType = 2
        } else if (
          window.sessionStorage.getItem('citycodeRole') == '1' &&
          window.sessionStorage.getItem('SelectCity') == '2'
        ) {
          parmes.roleType = 2
        }
        const res = await houseCheckSupervisionFwCheckList1(parmes)
        this.cityName = res.data.data
        console.log(data,'xiaohe')
        console.log(window.sessionStorage.getItem('citycodeQXName'), 'kkkk')
        this.XZQHName = this.XZQHName + '  ' + data.cityName
      } else {
        //选中了村 前去填表单
        this.ISshow = false
        this.XZQHName = this.XZQHName + '  ' + data.cityName
        window.sessionStorage.setItem('citycodeQXName1', this.XZQHName)
        window.sessionStorage.setItem('citycodeCun', data.cityCode)
        this.$router.push({
          path: '/SinceBuilding',
          query: {
            data: data.cityCode,
          },
        })
      }
    },
    handleSelectL: async function () {
      let parmes = {
        cityCode: window.sessionStorage.getItem('citycodeQX'),
        houseUse: 6,
        masterName: '',
        pageNo: 1,
        pageSize: 10000,
        roleType: window.sessionStorage.getItem('citycodeRole'),
      }
      if (window.sessionStorage.getItem('citycodeRole') == '0' && window.sessionStorage.getItem('SelectCity') == '1') {
        parmes.roleType = 1
      } else if (
        window.sessionStorage.getItem('citycodeRole') == '0' &&
        window.sessionStorage.getItem('SelectCity') == '2'
      ) {
        parmes.roleType = 2
      } else if (
        window.sessionStorage.getItem('citycodeRole') == '1' &&
        window.sessionStorage.getItem('SelectCity') == '2'
      ) {
        parmes.roleType = 2
      }
      const res = await houseCheckSupervisionFwCheckList1(parmes)
      this.cityName = res.data.data
      this.XZQHName = window.sessionStorage.getItem('citycodeQXName')
      console.log(this.XZQHName)
    },
  },
  mounted() {
    this.SXQ = this.$route.query.data
    this.handleSelectL()
    //根据路由传递的data和citycode动态切换列表数据
    // dd.ready(function () {
    //   dd.setTitle({
    //     title: this.SXQ,
    //   })
    //     .then((res) => {})
    //     .catch((err) => {
    //       console.error(err)
    //     })
    // })
  },
}
</script>

<style lang="scss" scoped>
.citylist {
  height: 100vh;
  width: 100vw;
  font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
  background-color: #eee;
  overflow-y: auto;
  .ListData {
    .ListData-ul {
      background-color: white;
      // margin: 14px 10px;
      border-radius: 10px;
      padding: 14px;
      width: 93%;
      margin: 0 auto;
      margin-top: 18px;
      box-shadow: 0 0 12px #e3e3e3;
      .ListData-name {
        color: dodgerblue;
        text-decoration: underline;
        font-size: 18px;
        font-weight: 1000;
      }
      .ListData-XZQH {
        font-size: 14px;
        color: black;
        line-height: 30px;
        span {
          color: black;
        }
      }
      .ListData-FWNum {
        font-size: 14px;
        color: black;
        line-height: 30px;
        span {
          color: #aaa;
        }
      }
    }
  }
}
</style>
